<template lang="html">
  <el-container class="el-container">
    <el-header style="height:80px">
      <div>
        <movie-index-header></movie-index-header>
      </div>
    </el-header>
    <el-main>
      <el-row>
        <el-col v-bind:span="24">
          <user-message></user-message>
        </el-col>
      </el-row>
      <el-row>
        <el-col v-bind:span="24">
          <el-carousel :interval="4000" trigger="click" indicator-position="outside" height="800px">
            <el-carousel-item v-for="recommend in headerItems" :key="recommend._id">
              <a :href="recommend.recommendImg">
                <img :src="recommend.recommendSrc" alt="主页推荐图">
              </a>
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
      <el-row>
        <el-col v-bind:span="12">
          <div v-if="movieItems.length === 0">
            <p>暂无电影信息</p>
          </div>
          <div v-else>
            <movie-list></movie-list>
          </div>
        </el-col>
        <el-col v-bind:span="12">
          <div>
            <div class="contentRight">
              <ul class="cont-ul">
                <news-list v-for="news in newsItems" :key="news._id" :id="news._id" :articleTitle="news.articleTitle"
                           :articleTime="news.articleTime">
                </news-list>
              </ul>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-main>
    <el-footer>
      <common-foot></common-foot>
    </el-footer>
  </el-container>
</template>

<script>
import MovieIndexHeader from '../components/MovieIndexHeader'
import CommonFoot from '../components/CommonFoot'
import NewsList from '../components/NewsList'
import MovieList from '../components/MovieList'
import UserMessage from '../components/UserMessage'

export default {
  data() {
    return {
      headerItems: [],
      newsItems: [],
      movieItems: []
    }
  },
  components: {
    MovieIndexHeader,
    CommonFoot,
    NewsList,
    MovieList,
    UserMessage
  },
  created() {
    this.$http.get("http://localhost:3000/showIndex")
        .then((res) => {
          this.headerItems = res.data.data.slice(0, 10);
          console.log(this.headerItems);
        })
        .catch(err => {
          console.log(err);
        })

    this.$http.get("http://localhost:3000/showArticle")
        .then((res) => {
          this.newsItems = res.data.data.slice(0, 10);
          console.log(this.newsItems);
        })
        .catch(err => {
          console.log(err);
        })

    this.$http.get("http://localhost:3000/showRanking")
        .then((res) => {
          this.movieItems = res.data.data.slice(0, 10);
          console.log(this.movieItems);
        })
        .catch(err => {
          console.log(err);
        })
  }
}
</script>

<style>
.el-header {
  padding: 0 0;
  height: 80px
}

.el-main {
  padding: 0 0;
}

</style>